"use client";
import React from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, Flex, Card } from "antd";
import "../globals.css";
import { useRouter } from "next/navigation";
import API from "../api/http"

const Login = () => {
  const router = useRouter();

  const onFinish = (values: any) => {
    console.log("Received values of form: ", values);
    API.login(values.username, values.password).then((res) => {
        if(res.data.msg=='登录成功'){
          localStorage.setItem("token", res.data.data);
          router.push("/");
          alert(res.data.msg);
        }else{
          alert(res.data.msg);
        }
    })
  };

  return (
    <div className="bigBox">
      <Card title="登录页面" style={{ width: "400px", margin: "200px auto" }}>
        <Form
          name="login"
          initialValues={{ remember: true }}
          style={{ maxWidth: 360 }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: "Please input your Username!" }]}
          >
            <Input prefix={<UserOutlined />} placeholder="Username" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "Please input your Password!" }]}
          >
            <Input
              prefix={<LockOutlined />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>

          <Form.Item>
            <Button block type="primary" htmlType="submit">
              Log in
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Login;
